<template>
  <div>
    <!-- 头部 -->
    <city-header></city-header>
    <!-- 搜索框 -->
    <city-search :cities="cities"></city-search>
    <!-- 列表 -->
    <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
    <!-- 字母索引列表 -->
    <city-alphabet :cities="cities"
       @change="handleLetterChange"
    ></city-alphabet>

  </div>
</template>


<script>
import axios from 'axios'
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'
export default {
  name:"City",
  components:{
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet
  },
  data () {
    return {
      cities:{},
      hotCities:[],
      letter:""
    }
  },
  methods : {
   getCityInfo () {
      //发axjx请求
      axios.get("/api/city.json").then(this.handleGetCityInfoSucc)
   },
   handleGetCityInfoSucc (res){
     console.log("请求城市列表数据成功")
     res = res.data
     if(res.ret && res.data){
       const data = res.data
       this.cities = data.cities
       this.hotCities = data.hotCities
     }
   },
   handleLetterChange (letter){
     console.log("父组件中:" + letter)
     this.letter = letter
   }
  },

  //vue的生命周期函数
  mounted () {
    this.getCityInfo()
  }
}
</script>

<style lang="stylus" scoped>

</style>
